<template>
    <div class="TreeTagsTwo">
        <el-tag
            :key="i"
            v-for="(tag,i) in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)">
            {{tag}}
        </el-tag>
        <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm">
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
    </div>
</template>
<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
<script>
  export default {
    name:'TreeTagsTwo',
    props:{
        slotData:{
            type:Object
        },
        attr_sel:{
            type:String
        }
    },
    data() {
      return {
        dynamicTags:[],
        inputVisible: false,
        inputValue: ''
      };
    },
    
    methods: {
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        let data={
            id:this.$props.slotData.cat_id,
            attrId:this.$props.slotData.attr_id,
            attr_name:this.$props.slotData.attr_name,
            attr_sel:this.$props.attr_sel,
            attr_vals:this.dynamicTags.join(' ')
        }
        this.$store.dispatch('categorie/Acs_putCategories',data)
          .then(res=>{console.log(res)})
          .catch(err=>console.log(err)) 
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        /*  console.log(inputValue);
         */
       // console.log(this.$props.slotData);
        let data={
            id:this.$props.slotData.cat_id,
            attrId:this.$props.slotData.attr_id,
            attr_name:this.$props.slotData.attr_name,
            attr_sel:this.$props.attr_sel,
            attr_vals:this.dynamicTags.join(' ')+` ${inputValue}`
        }
        
        if (inputValue) {
          this.dynamicTags.push(inputValue);
           //console.log(data)
          this.$store.dispatch('categorie/Acs_putCategories',data)
          .then(res=>{
              console.log(res)
              })
          .catch(err=>console.log(err)) 
        }
        this.inputVisible = false;
        this.inputValue = '';
      }
    },
    mounted(){
      this.dynamicTags=this.$props.slotData.attr_vals.split(' ')
    },
    watch:{
        '$props.slotData':{
            handler:function(newVal,oldVal){
                this.dynamicTags=newVal.attr_vals.split(' ')
            },
            deep:true,
            immediate:true
        }
    }
  }
</script>